<template>
  <div ref="lfRef" h-screen></div>
</template>
<script lang="ts" setup>
import {
  Snapshot,
  BpmnElement,
  Menu,
  DndPanel,
  SelectionSelect,
  Control
} from '@logicflow/extension'

import type { Ref } from 'vue'
import LogicFlow from '@logicflow/core'
import '@logicflow/core/dist/style/index.css'
import '@logicflow/extension/lib/style/index.css'
const lf = ref(null) as Ref<LogicFlow | null>
const lfRef = ref(null)
const data = {
  // 节点
  nodes: [
    {
      id: 50,
      type: 'rect',
      x: 300,
      y: 150,
      text: '你好'
    },
    {
      id: 21,
      type: 'circle',
      x: 500,
      y: 150
    }
  ],
  // 边
  edges: [
    {
      type: 'polyline',
      sourceNodeId: 50,
      targetNodeId: 21
    }
  ]
}

async function init() {
  await nextTick()
  const lfEl = unref(lfRef)
  if (!lfEl) {
    return
  }
  LogicFlow.use(DndPanel)

  // Canvas configuration
  LogicFlow.use(Snapshot)
  // Use the bpmn plug-in to introduce bpmn elements, which can be used after conversion in turbo
  LogicFlow.use(BpmnElement)
  // Start the right-click menu
  LogicFlow.use(Menu)
  LogicFlow.use(SelectionSelect)
  LogicFlow.use(Control)

  lf.value = new LogicFlow({
    container: lfEl,
    snapline: true,
    grid: true,
    stopScrollGraph: true,
    stopZoomGraph: true,
    background: {
      color: '#F3F3F3'
    },
    keyboard: {
      enabled: true
    }
  })
  onRender()
  lf.value.openSelectionSelect() //框选
  //拖拽面板
  lf.value.setPatternItems([
    {
      label: '选区',
      icon: ''
    },
    {
      type: 'circle',
      text: '开始',
      label: '开始节点',
      icon: ''
    },
    {
      type: 'rect',
      label: '用户任务',
      icon: '',
      className: 'important-node'
    },
    {
      type: 'rect',
      label: '系统任务',
      icon: '',
      className: 'import_icon'
    },
    {
      type: 'diamond',
      label: '条件判断',
      icon: ''
    },
    {
      type: 'circle',
      text: '结束',
      label: '结束节点',
      icon: ''
    }
  ])
}
function onRender() {
  lf.value?.render(data)
}
onMounted(init)
</script>
